<template>
  <div class="scenery">
    <div v-for="(sceneryOne, index) of scenery" :key="index">
      <p>{{sceneryOne.content}}</p>
      <ul class="scenery-pic">
        <li v-for="(picOne, index) of sceneryOne.pics" :key="index"><img :src="url+picOne"></li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'scenery',
    props: ['scenery'],
    data () {
      return {
        url: 'http://www.finewest.cn'
      }
    }
  }
</script>

<style scope lang="scss">
  .scenery{
    background-color: #ffffff;
    padding-bottom: 69px;
    p{
      font-size: 10px;
      color: #000000;
      margin: 0 11px 10px;
      padding-top: 10px;
    }
    ul.scenery-pic{
      display: -webkit-box;
      overflow: scroll;
      -webkit-overflow-scrolling: touch;
      &::-webkit-scrollbar{
        display: none;
      }
      li{
        margin-right: 2px;
        &:last-child{
          margin-right: 0px;
        }
      }
      li img{
        width: 243px;
        height: 150px;
        display: inherit;
      }
    }
  }
</style>
